import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import SDUtils from 'sudao-utils'

import './index.less'

type PageProps = {
  onSelect?: (currentClassify: any) => void,
  onDismiss?: () => void,
  top: number,
  dataList: any[]
}

type PageState = {
  isShow: boolean,
  currentClassify: object,
  leftList: any[],
  rightList: any[]
}

/// 商品分类组件
export default class GoodsClassify extends Component<PageProps, PageState> {

  static defaultProps = {
    top: 90
  }

  constructor () {
    super()
    this.state = {
      isShow: false,
      currentClassify: {},
      leftList: [],
      rightList: []
    }
  }

  currentClassify: any = {}

  render () {
    const { top } = this.props
    const { isShow, leftList, rightList } = this.state

    return (
      isShow ? (
        <View className='container' onTouchMove={this._handleEvent}>
          <View className='masker' onClick={this.dismiss}></View>
          <View className='content' style={`top: ${top}rpx;`}>
            <ScrollView className='left' scrollY>
              {
                leftList.map((item, index) => {
                  return (
                    <View key={index} className={item.selected ? `cell-item cell-item_sel` : 'cell-item'} onClick={this.onLeftItemTaped.bind(this, index)}>
                      <View className='line'></View>
                      <View className='title'>{item.name}</View>
                    </View>
                  )
                })
              }
            </ScrollView>
            <ScrollView className='right' scrollY>
              {
                rightList.map((item, index) => {
                  return (
                    <View key={index} className={`cell-item border-bottom_1px ${item.selected ? 'cell-item_sel' : ''}`} onClick={this.onRightItemTaped.bind(this, index)}>
                      {item.name}
                    </View>
                  )
                })
              }
            </ScrollView>
          </View>
        </View>
      ) : null
    )
  }

  _handleEvent = e => {
    e.stopPropagation()
  }

  onLeftItemTaped = (index) => {
    const { dataList } = this.props
    let { leftList } = this.state
    for (let i = 0; i < leftList.length; i++) {
      leftList[i].selected = index == i
    }
    const currentClassify = this.currentClassify || {}
    let dataItem = dataList.find(item => item.catalogId == leftList[index].catalogId)
    let rightList = ((dataItem || {}).children || []).map(item => {
      return {
        parentId: item.parentId,
        catalogId: item.catalogId,
        code: item.code,
        name: item.name,
        selected: item.catalogId == (currentClassify.catalogId || '')
      }
    })
    this.setState({
      leftList: leftList,
      rightList: rightList
    })
  }

  onRightItemTaped = (index: number) => {
    const { rightList } = this.state
    this.props.onSelect && this.props.onSelect(rightList[index])
  }

  dismiss = () => {
    this.props.onDismiss && this.props.onDismiss()
    this.setState({
      isShow: false
    })
  }

  show = (currentClassify: any) => {
    currentClassify = currentClassify || {}
    this.currentClassify = currentClassify
    const { dataList = [] } = this.props
    const list: any[] = SDUtils.deepClone(dataList) as any[]
    let leftList = list.map(item => {
      delete item.children
      item.selected = (currentClassify.parentId || '') == item.catalogId
      return item
    })
    let parentClassifyItem = dataList.find(item => item.catalogId == (currentClassify.parentId || ''))
    let rightList = ((parentClassifyItem || {}).children || []).map(item => {
      return {
        parentId: item.parentId,
        catalogId: item.catalogId,
        code: item.code,
        name: item.name,
        selected: item.catalogId == (currentClassify.catalogId || '')
      }
    })
    this.setState({
      isShow: true,
      currentClassify: currentClassify,
      leftList: leftList,
      rightList: rightList
    })
  }
}
